<template>
    <div class="content">
        <el-row >
            <el-col :span="6"><div class="grid-content bg-purple imgcenter">
                <el-image
                        :src="experts.headImg"
                        style="margin: 0 auto;display: inline-block;"
                ></el-image>
            </div></el-col>

        </el-row>
        <el-row >
            <el-col :span="3"><div class="grid-content bg-purple">姓名</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">{{experts.name}}</div></el-col>
        </el-row>
        <el-row >
            <el-col :span="3"><div class="grid-content bg-purple">性别</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">{{experts.sex}}</div></el-col>
        </el-row>
        <el-row >
            <el-col :span="3"><div class="grid-content bg-purple">单位</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">{{experts.specialty}}</div></el-col>
        </el-row>
        <el-row >
            <el-col :span="3"><div class="grid-content bg-purple">联系电话</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">{{experts.phone}}</div></el-col>
        </el-row>
        <el-row >
        <el-col :span="3"><div class="grid-content bg-purple">是否在值</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple">
            <template>
                <el-switch
                        v-model="experts.status==0?false:true"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                >
                </el-switch>
            </template>
        </div></el-col>
    </el-row>
        <el-row >
            <el-col :span="3"><div class="grid-content bg-purple">编号</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">{{experts.numberCard}}</div></el-col>
        </el-row>

    </div>

</template>

<script>
    import Table from '@/apis';
    export default {
        name: "CheckExpert",
        data(){
            return{
                id:this.$route.query.Id,
                experts:{},

            }
        },
        created() {
             this.getCheckExpertById(this.id);
        },
        methods:{
        async getCheckExpertById() {
            return await Table.getCheckExpertById(this.id).then(res => {
                this.experts = res.data.data;
                console.log(this.experts);
            });
        }
        }



    }
</script>

<style scoped>
    .imgcenter{
        text-align: center;
        width: 100px;
        height: 100px;
        margin-left: 40px;
        border: green solid 1px;
    }

    .content{
        width: 40%;
        margin: 30px auto;
    }
    .el-row {
        margin-bottom: 20px;
        line-height:30px;

    &:last-child {
         margin-bottom: 0;
         width:300px ;
     }
    }
    .el-col {

        border-radius: 4px;
        text-align: left;
    }

    .grid-content {

        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;

    }
    .grid-content bg-purple{
        width: 300px;
    }

</style>